<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>支付宝花呗账单</title>
	</head>
	<style>
		body{
			display: flex;
			justify-content: center;
		}
		.container{
			overflow: auto; /* 或者设置为 auto 或 scroll */
			width: 500px;
			height: 700px;
			box-sizing: border-box;
			box-shadow:  10px 10px 30px #bebebe; /* 添加阴影效果 */
			border-radius: 8px; /* 设置圆角边框 */
			
		}
		.first_parent{
			box-sizing: border-box;
			width: 500px;
			position: fixed;
			background-color: #bebebe
		}
		.two_parent{
			margin-top:45px;
			width: 500px;
		}
		.first{
			display:flex;
			width: 100%;
			height: 40px;
			/*均匀分布在盒子里面*/
			justify-content: space-between;
			border-top-right-radius: 8px;
			border-top-left-radius: 8px;
			box-shadow:  10px 10px 30px #bebebe; /* 添加阴影效果 */
		}
		.back_left{
			margin-left:3px;
			height: 100%;
			display: flex;
			font-size:14px;
			align-items: center;
		}
		.first span{
			height: 100%;
			display: flex;
			justify-content: center;
			/*上下居中*/
			align-items: center;
		}
		.first a{
			height: 100%;
			display: flex;
			/*上下居中*/
			align-items: center;
			margin-right:3px;
		}
		.second{
			
			width: 96%;
			margin:10px;
			height:250px;
			box-shadow:  10px 10px 30px #bebebe; /* 添加阴影效果 */
			border-radius: 8px; /* 设置圆角边框 */
		}
		.second .other_info{
			margin:10px;
		}
		.second a{
			display:block;
			
		}
		.second .yyed{
			width: 100%;
			height: 30px;
			padding: 10px;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		.second .yyje{
			width: 100%;
			height: 30px;
			padding: 10px;
			text-align: center;
		}
		.second .other_info {
			width: 100%;
		}
		.second .other_info .yy {
			width: 95%;
			margin-top:10px;
			height: 30px;
		}
		.second .other_info .dj{
			width: 95%;
			margin-top:10px;
			height: 30px;
		}
		.second .other_info .yy .xfyy{
			width: 50%;
			float:left;
			text-align:left;
		}
		.second .other_info .yy .xfje{
			width: 50%;
			float:right;
			text-align:right;
		}
		.second .other_info .dj .djyy{
			width: 50%;
			float:left;
			text-align:left;
		}
		.second .other_info .dj .djje{
			width: 50%;
			float:right;
			text-align:right;
		}
	
		.zmx{
			width: 96%;
			margin:10px;
		}
		
		.zmx a{
			display:block;
		}
		.zmx .card{
			margin-top:10px;
			width: 100%;
			box-shadow:  10px 10px 30px #bebebe; /* 添加阴影效果 */
			border-radius: 8px; /* 设置圆角边框 */
		}
		.zmx .card .rq{
			display:block;
			width: 100%;
			height:20px;
			padding:10px;
		}
		.zmx .card .xf{
			width: 100%;
			display:flex;
			/*均匀分布在盒子里面*/
			justify-content: space-between;
		}
		.zmx .card .xf .shmc{
			display:block;
			justify-content: left;
			padding-left:10px;
		}
		.zmx .card .xf .xfje{
			display:block;
			justify-content: right;
			padding-right:15px;
		}
		
		.zmx .card .xflx{
			display:block;
			padding:10px;
			font-size: 12px;
			color:#606266;
		}	
	</style>
	<body>
		<div class="container">
			<!-- 额度占用明细 -->
			<div class="first_parent">
				<div class="first">
					<a class="back_left"><</a>
					<span>额度占用明细</span>
					<a>联系客服</a>
				</div>
			</div>
			
			<div class="two_parent">
				<!-- 已用额度 -->
				<div class="second">
					<a class="yyed">已用额度(元)</a>
					<a class="yyje">9684.60</a>
					<div class="other_info">
						<div class="yy">
							<a class="xfyy">消费已用</a>
							<a class="xfje">9684.60</a>
						</div>
						<div class="dj">
							<a class="djyy">冻结已用</a>
							<a class="djje">0.0</a>
						</div>
					</div>
				</div>
				<!-- 总明细 -->
				<div class="zmx">
					<a>总明细</a>
					<div class="card">
						<a class="rq">12-01</a>
						<div class="xf">
							<a class="shmc">广州小霞包点小北店</a>
							<a class="xfje">-2.12</a>
						</div>
						<a class="xflx">花呗额度</a>
					</div>
					<div class="card">
						<a class="rq">12-01</a>
						<div class="xf">
							<a class="shmc">广州小霞包点小北店</a>
							<a class="xfje">-2.12</a>
						</div>
						<a class="xflx">花呗额度</a>
						<hr>
						<a class="rq">12-01</a>
						<div class="xf">
							<a class="shmc">广州小霞包点小北店</a>
							<a class="xfje">-2.12</a>
						</div>
						<a class="xflx">花呗额度</a>
						<hr>
						<a class="rq">12-01</a>
						<div class="xf">
							<a class="shmc">广州小霞包点小北店</a>
							<a class="xfje">-2.12</a>
						</div>
						<a class="xflx">花呗额度</a>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>